<template>
  <div style="width: 100%">
    <div class="time-label q-my-sm">Recent Uploads</div>
    <div class="row wrap">
      <video-card
        class="col-6 q-ma-xs"
        v-for="(video) in videos"
        :key="video.id"
        :video="video"
      />
    </div>
  </div>
</template>
<script lang="ts">
import Video from 'src/models/Video';
import VideoCard from 'components/video/VideoCard.vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    VideoCard,
  },
  setup() {
    const videos = ref([
      new Video('0'),
      new Video('1'),
      new Video('2'),
      new Video('3'),
      new Video('4'),
      new Video('5'),
      new Video('6'),
      new Video('7'),
    ]);
    return {
      videos,
    };
  },
});
</script>
<style lang="scss" scoped>
.time-label {
  font-size: 14px;
  color: #acacac;
}
</style>